<template>
  <div class="buyContainer">
    <!-- 头部 -->
    <van-nav-bar title="值得买" fixed placeholder>
      <template #left>
        <router-link to="/home" class="home" style="color: #000">
          <van-icon name="wap-home-o" />
        </router-link>
      </template>
      <template #right>
        <van-icon name="search" @click="toSearch" />
        <van-icon name="shopping-cart-o" @click="toCart" />
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <div class="buySweiper">
      <img
        src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
        class="u-bg"
      />
      <div class="buySweiperTittle">
        <img
          src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
          class="u-title"
        />
        <div class="utext">严选好物 用心生活</div>
      </div>
      <div class="buySweiperMain">
        <van-swipe :loop="false" :width="90" style="height: 220px">
          <van-swipe-item v-for="(page, index) in pages" :key="index">
            <div class="u-group" v-for="item in page" :key="item.id">
              <a :href="item.columnUrl">
              <img :src="item.picUrl" class="u-topPic" />
              <div class="u-mainText">{{ item.mainTitle }}</div>
              <div class="u-descText">{{ item.viceTitle }}</div>
              </a>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="commodityFlow">
      <vue-waterfall-easy
        :imgsArr="waterfallList"
        :maxCols="2"
        :mobileGap="20"
        @scrollReachBottom="getCommodityFlow"
        class="commodityFlowMain"
      >
        <div class="img-info" slot-scope="props">
          <p class="some-info text">{{ props.value.info }}</p>
          <p class="some-info lookDetail">
            <img class="userpic" :src="props.value.avatar" alt="" srcset="" />
            <span class="leftText">{{ props.value.nickName }}</span>
            <van-icon class="eye" name="eye-o" />
            <span class="rightText">{{ props.value.readCount }}</span>
            
          </p>
        </div>
      </vue-waterfall-easy>
    </div>
    
    <TabBar />

    <!-- <button @click="getCommodityFlow">123</button> -->
  </div>
</template>

<script>
import TabBar from '@/components/tabBar'
import vueWaterfallEasy from "vue-waterfall-easy";
import { reqBuySweiperList, reqCommodityFlowList } from "@/api/worthBuy";
export default {
  name: "Buy",
  components: {
    vueWaterfallEasy,
    TabBar
  },
  data() {
    return {
      swiperList: [],
      pages: [],
      commodityFlowList: [],
      group: 0, // 当前加载的加载图片的次数
      pullDownDistance: 0,
      waterfallList: [],
      active:0
    };
  },
  mounted() {
    // 获取轮播图数据
    this.getSwiperList();
    this.getCommodityFlow();
  },
  methods: {
    toSearch() {
      this.$router.push("/search");
    },
    //
    toCart() {
      this.$router.push("/cart");
    },
    async getSwiperList() {
      const result = await reqBuySweiperList();
      this.swiperList = result.data.navList;
      const pages = [];
      //把轮播图按每页8个分开展示
      this.swiperList.forEach((item, index) => {
        const page = Math.floor(index / 2);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      this.pages = pages;
      console.log(this.pages)
    },
    async getCommodityFlow() {
      const FlowData = await reqCommodityFlowList(this.group, 2);
      if (FlowData.code === "200") {
        this.group++;
        const { result } = FlowData.data;
        const list = result.map((item1) => {
          let topics = item1.topics;
          console.log(topics)
          return topics.map((item2) => {
            return {
              src: item2.picUrl,
              href: "/detail?skuid=2",
              info: item2.title,
              nickName: item2.nickname,
              readCount: item2.readCount,
              avatar: item2.avatar,
            };
          });
        });
        let waterfallList = [];
        list.forEach((item) => {
          waterfallList = waterfallList.concat(item);
        });
        this.waterfallList = this.waterfallList.concat(waterfallList);
        console.log(this.waterfallList);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.buyContainer {
  height: 100%;
  background-color: #eee;
  // overflow:hidden;
  .van-icon {
    font-size: 25px;
    color: black;
  }
  .buySweiper {
    // height: 355px;
    .u-bg {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .buySweiperTittle {
      padding: 20px 5px 0px;
      position: relative;
      height: 270px;
      .u-title {
        display: inline-block;
        height: 35px;
        position: relative;
        // top:5px;
      }

      .utext {
        color: white;
        display: inline;
        font-size: 5px;
        position: relative;
        top: -8px;
        left: 1px;
      }
    }
    .buySweiperMain {
      width: 95%;
      height: 220px;
      position: absolute;
      top: 105px;
      left: 10px;
      background-color: #fff;
      border-radius: 10px;
      .van-swipe .van-swipe-item {
        // width: 355px;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        .u-group {
          flex: 1;
          height: 80px;
          padding: 10px 5px;
          a{
            color: #333;
            .u-topPic {
              width: 52px;
              height: 52px;
              margin: 0 auto;
              display: block;
            }
            .u-mainText {
              text-align: center;
              font-size: 14px;
              // text-overflow: ellipsis;
              font-weight: bolder;
              margin: 1px 0;
            }
            .u-descText {
              margin: 2px 0;
              text-align: center;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .commodityFlow {
    .commodityFlowMain {
      //高度需要改进
      background: #eee;
      height: 1800px;
      position: absolute;
      overflow: hidden;

      .some-info {
        background-color: #fff;
      }
      .text {
        // background-color: #ccc;
        box-sizing: border-box;
        width: 100%;
        font-size: 14px;
        color: #333;
        text-align: left;
        padding: 7px 6px;
        border-bottom: 1px solid #eee;
      }
      .lookDetail {
        height: 40px;
        color: #7f7f7f;
        font-size: 12px;
        line-height: 40px;
        .leftText{
          position: relative;
          top: -15px;
          right: 0px;
        }
        .rightText{
          position: relative;
          top: -15px;
          left:10px;
        }
        .userpic {
          border-radius: 50%;
          width: 23px;
          // vertical-align: middle;
          margin: 10px 5px 10px 10px;
        }
        .userName {
          font-size: 12px;
          color: #7f7f7f;
        }
        .eye {
          padding: 0 2px 0 18px;
          width: 20px;
          height: 30px;
          line-height: 40px;
          position: relative;
          left: 0;
          top: -10px;
        }
        .m-upTex {
          color: #7f7f7f;
          padding-right: 10px;
        }
      }
    }
  }
  
}
</style>